<template>
  <div ref="selectionRef" class="rt-select" :class="selectionClass" @click="openOptionList">
    <span class="prefix">
      <slot name="prefix"></slot>
    </span>
    <span class="value">
      {{ state.label }}
    </span>
    <span v-if="!state.showOption && state.value && props.clear" @click.stop="handleClear" class="suffix"
      :class="{ clear: state.value }">
      <img src="@/assets/img/close_circle.png" alt="">
    </span>
    <span v-else class="suffix" :class="{ clear: state.value }">
      <img src="@/assets/img/arrow_down.png" :class="{ active: state.showOption }" alt="">
    </span>
    <div class="modal" v-if="state.showOption" @click.stop="closeOptionList"></div>
    <div ref="optionsRef" v-if="state.showOption" class="options" :class="selectionClass">
      <slot></slot>
    </div>
  </div>
</template>


<script setup>

import { reactive, watch, defineEmits, defineProps, onMounted, ref, nextTick } from "vue"
import { state } from './store';
import { number } from "echarts";
import { computed } from "vue";
const emits = defineEmits(['update:modelValue', 'handleSelect'])

const props = defineProps({
  modelValue: {
    require: true,
  },
  position: {
    default() {
      return 'top'
    }
  },
  clear: {
    default() {
      return true
    }
  }
})


const selectionRef = ref()
const optionsRef = ref()

watch(() => state.value, () => {
  emits('update:modelValue', state.value)
  emits('handleSelect', {
    value: state.value,
    label: state.label
  })
})

const selectionClass = computed(() => {
  if (!state.showOption) return ''
  if (props.position === 'bottom') {
    return 'bottom'
  } else {
    return 'top'
  }

})

const openOptionList = async () => {
  state.showOption = true;
  await nextTick();
  if (props.position === 'top') {
    optionsRef.value.style.bottom = `${selectionRef.value.clientHeight}px`
  } else {
    optionsRef.value.style.top = `${selectionRef.value.clientHeight}px`
  }
}

const closeOptionList = async () => {
  state.showOption = false;
}

const handleClear = () => {
  state.label = ''
  state.value = ''
  emits('update:modelValue', '')
}

onMounted(() => {
  // openOptionList()
})

</script>

<style lang="scss" scoped>
.modal {
  top: 0;
  left: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

.rt-select {
  width: 100%;
  height: 100%;
  border: 0.01rem solid #D8D8D8;
  border-radius: 0.16rem;
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  position: relative;

  &.top {
    border-radius: 0 0 0.16rem 0.16rem;
    border-top: none;
  }

  &.bottom {
    border-radius: 0.16rem 0.16rem 0 0;
    border-bottom: none;
  }

  .prefix {
    font-size: 0.28rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #7E7E7E;
    line-height: 0.4rem;
    margin-right: 0.1rem;
  }

  .value {
    font-size: 0.28rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.options {
  min-width: 100%;
  position: absolute;
  background-color: #fff;
  border: 0.01rem solid #D8D8D8;
  z-index: 10;
  left: 0;
  height: 3.5rem;
  overflow: auto;

  &.top {
    border-radius: 0.16rem 0.16rem 0 0;
  }

  &.bottom {
    border-radius: 0 0 0.16rem 0.16rem;
  }
}

.suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 0.5rem;
  width: 0.5rem;
  right: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 0.3rem;
    height: 0.3rem;
    object-fit: contain;
    object-position: center center;
    transition: all .2s;
    transform: rotate(0);

    &.active {
      transform: rotate(180deg);
    }
  }
}</style>